<template>
    <div ref="MapView" style="width:100%;height:100%">
        <div class="control">
            <RadioGroup v-model="SenceMode" type="button" @on-change="changeSenceMode">
                <Radio label="2D"></Radio>
                <Radio label="3D"></Radio>
            </RadioGroup>
            <br><br>
            显示隐藏： <i-switch v-model="show" size="large"></i-switch>
            <br><br>
            雷达罩半径(米)： <Slider v-model="radius" :min="0" :max="1000000"></Slider>
            X轴夹角：<Slider v-model="xHalfAngle" :min="0" :max="90"></Slider>
            Y轴夹角：<Slider v-model="yHalfAngle" :min="0" :max="90"></Slider>
            面颜色：
            <ColorPicker v-model="Color" alpha />&nbsp;<br><br>
            线颜色：
            <ColorPicker v-model="Line" alpha />&nbsp;<br><br>
            -----------------------------------------
            <br>
            显示扫描扇面 ：<i-switch v-model="showScanPlane" size="large"></i-switch>
            <br><br>
            <div v-if="showScanPlane">
                扫描面颜色：
                <ColorPicker v-model="scanPlaneColor" alpha />&nbsp;<br><br>
                开启动画： <i-switch v-model="scanPlaneSwitch" size="large"></i-switch>
                <br><br>
                扫描方向： <RadioGroup v-model="scanPlaneMode" type="button">
                    <Radio label="horizontal">横向</Radio>
                    <Radio label="vertical">纵向</Radio>
                </RadioGroup>
            </div>
            -----------------------------------------
            <br>
            航向角： <Slider v-model="heading" :min="0" :max="360"></Slider>
            俯仰角：<Slider v-model="pitch" :min="-90" :max="90"></Slider>
            翻滚角：<Slider v-model="roll" :min="0" :max="360"></Slider>
        </div>
    </div>
</template>

<script>

import simpleMap from '../../components/simpleMap'
import gsap from 'gsap';
var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]
// 随机函数
function randomNum(min, max) {
    return parseFloat(Math.random() * (max - min + 1) + min, 10);
}
var timer = null;



// 由于方位变换属性需要用到 坐标，故放在外面
let l = Cesium.Cartesian3.fromDegrees(117.224, 31.819, 128);
var _Entity = null;



export default {
    data() {
        return {
            SenceMode: '3D',
            show: true,
            xHalfAngle: 45,
            yHalfAngle: 45,
            scanPlaneSwitch: false,
            showScanPlane: false,
            scanPlaneMode: 'vertical',
            Color: 'rgba(100,0,255,0.4)',
            Line: 'rgba(100,0,255,1)',
            scanPlaneColor: 'rgba(100,0,255,0.7)',
            radius: 100000,
            heading: 90,
            pitch: 0,
            roll: 0,
        }
    },
    watch: {
        radius(value) {
            _Entity.rectangularSensor.radius = value;
        },
        show(value) {
            _Entity.show = value
        },
        xHalfAngle(value) {
            _Entity.rectangularSensor.xHalfAngle = Cesium.Math.toRadians(value);
        },
        yHalfAngle(value) {
            _Entity.rectangularSensor.yHalfAngle = Cesium.Math.toRadians(value);
        },
        scanPlaneSwitch(value) {
            _Entity.rectangularSensor.scanPlaneSwitch = value;
        },
        showScanPlane(value) {
            _Entity.rectangularSensor.showScanPlane = value;
        },
        scanPlaneMode(value) {
            _Entity.rectangularSensor.scanPlaneMode = value;
        },
        Color(value) {
            _Entity.rectangularSensor.material = this.rgba2Color(value);
        },
        Line(value) {
            _Entity.rectangularSensor.lineColor = this.rgba2Color(value);
        },
        scanPlaneColor(value) {
            _Entity.rectangularSensor.scanPlaneColor = this.rgba2Color(value);
        },
        heading() {
            let r = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(this.heading), Cesium.Math.toRadians(this.pitch), Cesium.Math.toRadians(this.roll));
            _Entity.orientation = Cesium.Transforms.headingPitchRollQuaternion(l, r)
        },
        pitch() {
            let r = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(this.heading), Cesium.Math.toRadians(this.pitch), Cesium.Math.toRadians(this.roll));
            _Entity.orientation = Cesium.Transforms.headingPitchRollQuaternion(l, r)
        },
        roll() {
            let r = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(this.heading), Cesium.Math.toRadians(this.pitch), Cesium.Math.toRadians(this.roll));
            _Entity.orientation = Cesium.Transforms.headingPitchRollQuaternion(l, r)
        },

    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView, {
            mapOptions: {
                // animation: false, // 关闭默认动画事件
                senceMode: this.SenceMode, // 初始化时，以2D模式进行渲染
            },
        });
        map.addProviders(mapConfig);
        // map.flytochina();
        var viewer = map.getViewer();
        // var scene = viewer.scene;

        let r = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(90), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0));



        _Entity = viewer.entities.add({
            position: l,
            orientation: Cesium.Transforms.headingPitchRollQuaternion(l, r),
            rectangularSensor: new Cesium.RectangularSensorGraphics({
                radius: 100000,
                show: this.show,
                xHalfAngle: Cesium.Math.toRadians(this.xHalfAngle),
                yHalfAngle: Cesium.Math.toRadians(this.yHalfAngle),
                material: this.rgba2Color(this.Color),
                lineColor: this.rgba2Color(this.Line),
                showScanPlane: this.showScanPlane,
                scanPlaneSwitch: this.scanPlaneSwitch,
                scanPlaneColor: this.rgba2Color(this.scanPlaneColor),
                scanPlaneMode: this.scanPlaneMode,
                showIntersection: false,
                scanPlaneRate: 5,
                showThroughEllipsoid: false
            })
        });
        viewer.flyTo(_Entity);

        // 删除指定Entity，走原生方法
        // viewer.entities.remove(_Entity)

        console.log(_Entity);
    },
    methods: {
        rgba2Color(value) {
            const regex = /(?<=\().+?(?=\))/g; // [] 中括号    
            var _value = value.match(regex)[0].split(',');
            return new Cesium.Color(_value[0] / 255, _value[1] / 255, _value[2] / 255, _value[3]);
        },
        changeSenceMode(type) {
            this.SenceMode = type;
            // 更改当前的显示模式
            map.SenceMode = type;
        },
    },
    beforeDestroy() {
        // 页面被注销时，销毁地图
        map && map.destroy();
        map = null;
    }
}
</script>

<style>
.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
    z-index: 4;
}
.title {
    color: #fff;
}
.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}
.itemBox {
    margin-bottom: 5px;
}
</style>